<template>
  <view class="indexContainer">
    <!-- 轮播图组件 -->
    <my-swiper :bannerList="bannerList" />
    <!-- 中部导航栏组件-->
    <my-nav />
    <!-- 推荐歌单组件 -->
    <my-recommend :recommendList="recommendList" />
    <!-- 排行榜组件 -->
    <my-topList :topList="topList" />
  </view>
</template>

<script>
import request from '@/utils/request.js';
export default {
  data() {
    return {
      // 轮播图数据
      bannerList: [],
      // 推荐歌单数据
      recommendList: [],
      // 排行榜数据
      topList: []
    };
  },

  created() {
    this.getBanner();
    this.getrecommend();
    this.getTopList();
  },

  methods: {
    // 请求轮播图数据
    async getBanner() {
      const res = await request('/banner', { type: 2 });
      this.bannerList = res.banners;
    },
    // 请求推荐歌单数据
    async getrecommend() {
      const res = await request('/personalized', { limit: 10 });
      this.recommendList = res.result;
    },
    // 请求排行榜数据
    async getTopList() {
      const res = await request('/toplist');
      const topList1 = res.list.slice(0, 4);
      const topListDetail = [];
      for (let item of topList1) {
        let detailList = await request(`/playlist/detail?id=${item.id}`, { limit: 10 });
        topListDetail.push({ name: detailList.playlist.name, tracks: detailList.playlist.tracks.slice(0, 3) });

        this.topList = topListDetail;
      }
      // topList1.forEach(item => {
      //   let detailList = await request(`/playlist/detail?id=${item.id}`, { limit: 10 });
      //   topListDetail.push({ name: detailList.playlist.name, tracks: detailList.playlist.tracks.slice(0, 3) });
      //   this.topList = topListDetail;
      // });
    }
  }
};
</script>

<style lang="scss"></style>
